<template>
  <div class="bg">
    <!-- 一个月份的日历 -->
    <div id="container">
      <div class="calendar wow bounceInRight" data-wow-duration="1s">
        <div class="header">
          <div class="today">
            <span>{{ today.year }}年</span
            ><span>{{ today.month.toString().padStart(2, "0") }}月</span>
          </div>
          <div class="change-day">
            <el-button v-on:click="premonth"
              ><span class="el-icon-arrow-left"></span>上一月</el-button
            ><el-button @click="change_today">今天</el-button
            ><el-button v-on:click="nextmonth"
              >下一月<span class="el-icon-arrow-right"></span
            ></el-button>
            <el-button
              class="iconfont iconicon_huabanfuben"
              style="font-size: 14px"
              @click="fullyear"
            ></el-button>
          </div>
        </div>
        <div class="week">
          <ul class="ul-week">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
          </ul>
        </div>
        <div class="day">
          <ul class="ul-day">
            <li
              v-for="(items, index) in days"
              :key="index"
              :class="[
                { nowli: nowLi == today.year + '' + today.month + '' + items }
              ]"
            >
              <div
                :class="[
                  'day-item',
                  {
                    nomonth:
                      index < nomonthdata.start || index > nomonthdata.end
                        ? true
                        : false
                  }
                ]"
                :title="
                  index < nomonthdata.start || index > nomonthdata.end
                    ? ''
                    : holidayDateTitle(items)
                "
                @click="
                  index < nomonthdata.start || index > nomonthdata.end
                    ? ''
                    : changeVisible(holidayDateName(items))
                "
              >
                <span
                  >{{ items
                  }}<i
                    class="holiday"
                    v-if="
                      jiejialist.indexOf(holidayDateName(items)) != -1 &&
                        !(index < nomonthdata.start || index > nomonthdata.end)
                    "
                    >假</i
                  ></span
                >
                <span
                  class="holidayName"
                  v-if="
                    jiejialist.indexOf(holidayDateName(items)) != -1 &&
                      !(index < nomonthdata.start || index > nomonthdata.end)
                  "
                  >{{ Holiday_name[holidayDateName(items)] }}</span
                >
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 12个月份的日历 -->
    <div class="new-container" style="display: none">
      <div class="new-header">
        <el-button @click="prevyear"
          ><span class="el-icon-arrow-left"></span>上一年</el-button
        >
        <el-button @click="jinnian">今年</el-button>
        <el-button @click="nextyear"
          >下一年<span class="el-icon-arrow-right"></span
        ></el-button>
        <el-button
          class="iconfont iconshousuo"
          style="font-size: 14px"
          @click="singlemonth"
        ></el-button>
      </div>
      <el-row>
        <!-- 日历开始 -->
        <el-col
          :md="8"
          v-for="(item1, index1) in allyear"
          :key="index1"
          class="wow bounceInUp"
          data-wow-duration="1s"
        >
          <div class="calendar">
            <div class="header">
              <div class="today" @click="fullyear">
                <span>{{ today.year }}年</span><span>{{ index1 + 1 }}月</span>
              </div>
            </div>
            <div class="week">
              <ul class="ul-week">
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
              </ul>
            </div>
            <div class="day">
              <ul class="ul-day">
                <li
                  v-for="(item2, index2) in item1"
                  :key="index2"
                  :class="[
                    { nowli: nowLi == today.year + '' + (index1 + 1) + item2 }
                  ]"
                >
                  <div
                    :class="[
                      'day-item',
                      {
                        nomonth:
                          index2 < item1.indexOf(1) ||
                          index2 >
                            item1.indexOf(
                              allyeardays(today.year, index1 + 1),
                              item1.indexOf(1) + 1
                            )
                      }
                    ]"
                    :title="
                      index2 < item1.indexOf(1) ||
                      index2 >
                        item1.indexOf(
                          allyeardays(today.year, index1 + 1),
                          item1.indexOf(1) + 1
                        )
                        ? ''
                        : allyearTitle(index1, item2)
                    "
                    @click="
                      index2 < item1.indexOf(1) ||
                      index2 >
                        item1.indexOf(
                          allyeardays(today.year, index1 + 1),
                          item1.indexOf(1) + 1
                        )
                        ? ''
                        : changeVisible(allyearName(index1, item2))
                    "
                  >
                    <span
                      >{{ item2
                      }}<i
                        class="holiday"
                        v-if="
                          jiejialist.indexOf(allyearName(index1, item2)) !=
                            -1 &&
                            !(
                              index2 < item1.indexOf(1) ||
                              index2 >
                                item1.indexOf(
                                  allyeardays(today.year, index1 + 1),
                                  item1.indexOf(1) + 1
                                )
                            )
                        "
                        >假</i
                      ></span
                    >
                    <span
                      class="holidayName"
                      v-if="
                        jiejialist.indexOf(allyearName(index1, item2)) != -1 &&
                          !(
                            index2 < item1.indexOf(1) ||
                            index2 >
                              item1.indexOf(
                                allyeardays(today.year, index1 + 1),
                                item1.indexOf(1) + 1
                              )
                          )
                      "
                      >{{Holiday_name[allyearName(index1, item2)]}}</span
                    >
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <dialog-a
      :dialogVisible.sync="Visible"
      @setjiejia="getinfo"
      :isjiejia="jiejiaselect"
      :parentdata="jiejialist"
    ></dialog-a>
  </div>
</template>

<script>
import Dialog from "./dialog.vue";
const date = new Date();
import { WOW } from "wowjs";
export default {
  created() {
    this.gettoday();
    this.handleShowDateStyle();
    this.pushDays(this.today.year, this.today.month);
    this.monthstyledata();
    this.getallyear(this.today.year, this.today.month);
    this.getmonthholiday(this.today.year, this.today.month);
  },
  mounted() {
    new WOW().init();
  },
  computed: {
    holidayDateName: function() {
      return function(items) {
        return (
          this.today.year +
          "-" +
          this.today.month.toString().padStart(2, "0") +
          "-" +
          items.toString().padStart(2, "0")
        );
      };
    },
    holidayDateTitle: function() {
      return function(items) {
        return (
          this.today.year +
          "年" +
          this.today.month.toString().padStart(2, "0") +
          "月" +
          items.toString().padStart(2, "0") +
          "日"
        );
      };
    },
    allyearTitle: function() {
      return function(index1, item2) {
        return (
          this.today.year +
          "年" +
          (index1 + 1).toString().padStart(2, "0") +
          "月" +
          item2.toString().padStart(2, "0") +
          "日"
        );
      };
    },
    allyearName: function() {
      return function(index1, item2) {
        return (
          this.today.year +
          "-" +
          (index1 + 1).toString().padStart(2, "0") +
          "-" +
          item2.toString().padStart(2, "0")
        );
      };
    }
  },
  components: {
    "dialog-a": Dialog
  },
  name: "Calendar",
  data() {
    return {
      today: {
        year: "",
        month: "",
        day: ""
      },
      days: [],
      nowLi: "",
      nomonthdata: {
        start: "",
        end: ""
      },
      allyear: [],
      Visible: false,
      jiejiaselect: "",
      jiejialist: [],
      page_type: 1,
      Holiday_name: {}
    };
  },
  methods: {
    // 获取一整月的假期
    async getmonthholiday(Y, M) {
      this.Holiday_name={}
      this.jiejialist = [];
      const { data: res } = await this.$http.get("/queryHoliday", {
        params: { holidayDate: Y + "-" + M.toString().padStart(2, "0") }
      });
      for (var i = 0; i < res.data.length; i++) {
        this.jiejialist.push(res.data[i].holidayDate);
        var key = res.data[i].holidayDate;
        var value = res.data[i].type;
        this.Holiday_name[key] = value;
      }
    },
    // 获取一整年的假期
    async getyearholiday(Y) {
      this.Holiday_name={}
      this.jiejialist = [];
      const { data: res } = await this.$http.get("/queryHoliday", {
        params: { holidayDate: Y.toString() }
      });
      for (var i = 0; i < res.data.length; i++) {
        this.jiejialist.push(res.data[i].holidayDate);
        var key = res.data[i].holidayDate;
        var value = res.data[i].type;
        this.Holiday_name[key] = value;
      }
    },
    getinfo() {
      if (this.page_type == 1) {
        this.getmonthholiday(this.today.year, this.today.month);
      } else {
        this.getyearholiday(this.today.year);
      }
    },
    changeVisible(val) {
      this.Visible = true;
      this.jiejiaselect = val;
    },
    //控制当前日期显示特殊样式
    handleShowDateStyle() {
      let now = new Date();
      this.nowLi =
        now.getFullYear().toString() +
        (now.getMonth() + 1).toString() +
        now.getDate().toString();
    },
    gettoday() {
      this.today.year = date.getFullYear();
      this.today.month = date.getMonth() + 1;
      this.today.day = date.getDate();
    },
    //获取每个月份页面对应的日
    //获取当前月份有多少天
    getDays(Y, M) {
      let day = new Date(Y, M, 0).getDate();
      return day;
    },
    //得到当前年，这个月的一号是周几
    getWeek(Y, M) {
      let now = new Date();
      now.setFullYear(Y);
      now.setMonth(M - 1);
      now.setDate(1);
      let week = now.getDay();
      return week;
    },
    pushDays(Y, M) {
      //将这个月多少天加入数组days
      for (let i = 1; i <= this.getDays(Y, M); i++) {
        this.days.push(i);
      }
      //将下个月要显示的天数加入days
      for (let i = 1; i <= 42 - this.getDays(Y, M) - this.getWeek(Y, M); i++) {
        this.days.push(i);
      }
      //将上个月要显示的天数加入days
      for (let i = 0; i < this.getWeek(Y, M); i++) {
        var lastMonthDays = this.getDays(Y, M - 1);
        this.days.unshift(lastMonthDays - i);
      }
    },
    // 下一个月份
    nextmonth() {
      this.days = [];
      this.pushDays(this.today.year, this.today.month + 1);
      this.today.month++;
      this.getmonthholiday(this.today.year, this.today.month);
      if (this.today.month > 12) {
        this.today.year++;
        this.today.month = 1;
        this.getmonthholiday(this.today.year, this.today.month);
      }
      this.monthstyledata();
    },
    // 上一个月份
    premonth() {
      this.days = [];
      this.pushDays(this.today.year, this.today.month - 1);
      this.today.month--;
      this.getmonthholiday(this.today.year, this.today.month);
      if (this.today.month < 1) {
        this.today.year--;
        this.today.month = 12;
        this.getmonthholiday(this.today.year, this.today.month);
      }
      if (this.today.year < 1970) {
        alert("没有更多的年份");
        return;
      }
      this.monthstyledata();
    },
    //今天
    change_today() {
      this.days = [];
      this.gettoday();
      this.pushDays(this.today.year, this.today.month);
      this.monthstyledata();
      this.getmonthholiday(this.today.year, this.today.month);
    },
    // 界面内非本月日期的样式
    monthstyledata() {
      this.nomonthdata.start = this.days.indexOf(1);
      var temp = this.days.indexOf(
        this.getDays(this.today.year, this.today.month)
      );
      if (
        this.days.indexOf(
          this.getDays(this.today.year, this.today.month),
          temp + 1
        ) != -1
      ) {
        this.nomonthdata.end = this.days.indexOf(
          this.getDays(this.today.year, this.today.month),
          temp + 1
        );
      } else {
        this.nomonthdata.end = temp;
      }
    },
    // 一个月与十二个月份界面的切换
    fullyear() {
      document.querySelector(".new-container").style.display = "block";
      document.querySelector("#container").style.display = "none";
      this.getyearholiday(this.today.year);
      this.page_type = 2;
    },
    //获取整年的月份和天数
    getallyear() {
      for (var i = 1; i <= 12; i++) {
        var temp = this.pushalldays(this.today.year, i);
        this.allyear.push(temp);
      }
    },
    pushalldays(Y, M) {
      var temp = [];
      //将这个月多少天加入数组days
      for (let i = 1; i <= this.getDays(Y, M); i++) {
        temp.push(i);
      }
      //将下个月要显示的天数加入days
      for (let i = 1; i <= 42 - this.getDays(Y, M) - this.getWeek(Y, M); i++) {
        temp.push(i);
      }
      //将上个月要显示的天数加入days
      for (let i = 0; i < this.getWeek(Y, M); i++) {
        var lastMonthDays = this.getDays(Y, M - 1);
        temp.unshift(lastMonthDays - i);
      }
      return temp;
    },
    //切换单页
    singlemonth() {
      document.querySelector("#container").style.display = "block";
      document.querySelector(".new-container").style.display = "none";
      this.getmonthholiday(this.today.year, this.today.month);
      this.page_type = 1;
    },
    // 切换全年
    allyeardays: function(Y, M) {
      let day = new Date(Y, M, 0).getDate();
      return day;
    },
    // 下一年
    nextyear() {
      this.allyear = [];
      this.today.year++;
      this.getallyear();
      this.getyearholiday(this.today.year);
    },
    // 今年
    jinnian() {
      this.allyear = [];
      this.gettoday();
      this.getallyear();
      this.getyearholiday(this.today.year);
    },
    // 上一年
    prevyear() {
      this.allyear = [];
      this.today.year--;
      if (this.today.year < 1970) {
        alert("没有更多的年份");
        return;
      }
      this.getallyear();
      this.getyearholiday(this.today.year);
    }
  }
};
</script>
<style scoped>
#container {
  padding: 25px;
  margin: 0 auto;
}
.calendar {
  width: 100%;
  padding: 10px 10px;
  border-radius: 16px;
  box-sizing: border-box;
  user-select: none;
  font-family: "FZYaoti", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  font-size: 20px;
}
.calendar .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.today span {
  cursor: pointer;
  font-size: 20px;
}
.el-button {
  padding: 10px 10px;
  font-size: 10px;
}
.week {
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid #ccc;
  background-color: #fafafa;
}
.ul-week {
  display: flex;
  justify-content: space-around;
}
.ul-week li {
  padding: 3px 0;
  text-align: center;
  flex: 1;
}
.ul-day {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff9ef;
}
.ul-day li {
  padding: 3px 0;
  cursor: pointer;
  text-align: center;
  width: 14.28%;
  border-collapse: collapse;
  border-top: 1px solid #ccc;
}
.ul-day li:hover {
  background-color: #d4f6e8;
}
.ul-day li .day-item {
  margin: 2px 2px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nomonth {
  opacity: 0.5;
}
.day-item {
  position: relative;
}
.day-item span {
  font-weight: 700;
  position: relative;
}
.nowli {
  color: red;
  background-color: #d4f6e8;
  border-radius: 3px;
}
.new-container {
  margin: 0;
  padding: 25px;
  padding-top: 5px;
}
.el-col {
  padding: 10px;
}
.new-header {
  display: flex;
  width: 33.33%;
  justify-content: space-around;
  align-items: center;
  margin: 5px auto;
}
.holiday {
  position: absolute;
  font-size: 8px;
  color: red;
  float: right;
}
.holidayName {
  position: absolute !important;
  bottom: -5px;
  font-size: 8px;
  color: red;
  font-family: "等线";
}
</style>
